<template>
  <div class="service-user">
    <div @click="getUserId(item.id)" class="average-shang" v-for="(item, index) in list" :key="index">
      <div class="average-shang-left">
        <img class="img" :src="item.pic" />
      </div>
      <div class="average-shang-center">
        <div class="average_name">
          <strong>{{ item.name }}</strong>
          <span class="span">
            <strong>8000元 / </strong>
            <span>26天</span>
          </span>
        </div>
        <div class="average_job">
          <span>{{ item.level + item.jobss }}</span>
          <span>6年经验</span>
        </div>
        <div class="average_jingli">
          <span>湖南长沙 | </span>
          <span>46岁 | </span>
          <span>服务13户 | </span>
          <span>评价13条</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/mock/px-mock.js'
export default {
  name: 'ServiceUser',
  components: {},
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    // 点击岗位
    jobSpan (index, items) {
      this.artic = index
      const content = JSON.parse(window.localStorage.getItem('account'))
      const arr = []
      if (index !== 8) {
        content.list.map((item, index) => {
          if (content.list[index].jobss === items) {
            return arr.push(content.list[index])
          }
        })
        // this.list = arr
        this.$emit('listUser', arr)
      } else {
        // this.list = content.list
        this.$emit('listUser', content.list)
      }
    },
    // 点击保存用户id到本地存储
    getUserId (id) {
      window.localStorage.setItem('userId', id)
      this.$router.push(`/herdetails/${id}`)
    },
  },
}
</script>

<style scoped lang="less">
.service-user {
  /deep/ .average-shang {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #f7f5f5;
    .average-shang-left {
      width: 140px;
      height: 140px;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .average-shang-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 30px;
      .average_name {
        display: flex;
        justify-content: space-between;
        font-size: 26px;
        .span {
          font-size: 22px;
          color: #979191;
        }
      }
      .average_job {
        span {
          display: inline-block;
          font-size: 22px;
          height: 40px;
          color: #1196db;
          line-height: 40px;
          border: 1px solid#1196db;
          border-radius: 40px;
          padding: 0 30px;
          margin-right: 20px;
        }
      }
      .average_jingli {
        font-size: 20px;
        color: #979191;
      }
    }
    .average-shang-right {
      font-size: 22px;
      height: 40px;
      border-radius: 40px;
      background-color: #1196db;
      padding: 3px 30px;
      line-height: 40px;
      color: #fff;
    }
  }
}
</style>
